<template>
  <el-header height="64px" class="header-box">
    <div class="left-item">
      <el-image class="collapse-img" :src="collapseSrc"></el-image>
      <!-- <div>早上好!</div> -->
    </div>
    <div class="right-item">
      <!-- <div class="setting">
        <el-image class="setting-img" :src="settingSrc"></el-image>
      </div>
      <div class="split-line"></div>
      <div class="alarm">
        <el-badge :value="2">
          <el-image class="alarm-img" :src="alarmSrc"></el-image>
        </el-badge>
      </div> -->
      <!-- <div class="split-line"></div> -->
      <div class="user-info-box" @click="logoutFn">
        <el-image class="user-header-img" :src="userHeaderSrc"></el-image>
        <div class="user-info">{{username}}</div>
        <!-- <el-image class="arrowdown-img" :src="arrowdownSrc"></el-image> -->
      </div>
    </div>
  </el-header>
</template>
<script>
import { reactive, toRefs } from "vue";
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from "vue-router";
export default {
  name: "Headercom",
  setup(){
    let data = reactive({
      settingSrc: require("@/assets/img/header/3308@2x.png"),
      alarmSrc: require("@/assets/img/header/3665@2x.png"),
      collapseSrc: require("@/assets/img/header/collapse.png"),
      arrowdownSrc: require("@/assets/img/header/arrowdown.png"),
      userHeaderSrc: require("@/assets/img/header/user-img.png"),
      username: localStorage.getItem('ACCOUNt')
    })
    let router = useRouter()
    function logoutFn(){
        ElMessageBox.confirm(
          '真的要退出登录吗?',
          '温馨提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          localStorage.removeItem('ACCESS_TOKEN')
          ElMessage({
            type: 'success',
            message: '退出登录成功',
          })
          router.push({path: '/user/login'})
        }).catch(() => {})      
    }
    return {
      ...toRefs(data),
      logoutFn
    }
  }
};
</script>
<style lang="scss" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  padding-right: 45px;
  height: 64px;
  background: #ffffff !important;
  box-shadow: 0px 6px 10px rgba(214, 214, 214, 0.16) !important;  
  opacity: 1 !important;
  .left-item {
    display: flex;
    align-items: center;
    padding: 30px 28px;
    .collapse-img {
      width: 24px;
      height: 24px;
      opacity: 1;
      margin-right: 16px;
      cursor: pointer;
    }
  }
  .right-item {
    display: flex;
    justify-content: center;
    align-items: center;
    .split-line {
      width: 1px;
      height: 28px;
      background: #dfe2eb;
      opacity: 1;
      margin: 0 20px;
    }
    .setting {
      .setting-img {
        width: 36px;
        height: 36px;
        background: #ff991e;
        border-radius: 50%;
        opacity: 1;
        cursor: pointer;
      }
    }
    .alarm-img {
      width: 36px;
      height: 36px;
      background: #f5f8ff;
      border-radius: 50%;
      opacity: 1;
      cursor: pointer;
    }
    .user-info-box {
      display: flex;
      align-items: center;
      cursor: pointer;
      .user-header-img {
        width: 36px;
        height: 36px;
        background: rgba(0, 0, 0, 0);
        border-radius: 50%;
        opacity: 1;
        margin-right: 8px;
      }
      .user-info {
        width: 48px;
        height: 21px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 21px;
        color: #334762;
        opacity: 1;
        margin-right: 5px;
      }
      .arrowdown-img {
        width: 18px;
        height: 18px;
        opacity: 1;
      }
    }
  }
}
</style>
